<!--
  - Copyright (c) 2019.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div>
    <el-card :body-style="{padding:'0px 0px 24px',backgroud:'#fff'}">
      <el-row style="padding-left: calc(50% - 74px);margin-top: 16px;margin-bottom: 16px;text-align: left;">
        <el-button @click="goBack()"
                   style="padding: 7px 18px; margin-right: 7px; width: 132px; height: 36px;"
                   type="info" round>
          <span style="font-size: 16px;line-height: 20px">返回列表</span>
        </el-button>
        <el-button :disabled="customerTransfer.billStatus != 'INITIAL'" type="primary" icon="joys-icon-submitcheck"
                   size="small" @click="submit">
          提交
        </el-button>
      </el-row>
      <el-row class="process-row-cs">
        <process-over-view :busi-id="customerTransfer.customerTransferId"></process-over-view>
      </el-row>
      <el-row style="width: 96%;margin:0px auto" :class="{cardBackColor:editOption}">
        <el-col style="padding: 16px 0px;margin-left:20px;text-align:left;" :span="15">
          移交信息
        </el-col>
        <el-col>
          <el-button style='float:right' v-show="!editOption && customerTransfer.billStatus == 'INITIAL'" size="small"
                     @click="edit()" plain>编辑
          </el-button>
        </el-col>

      </el-row>
    </el-card>
    <el-card :body-style="{padding:'0px 20px'}">
      <div style="width: 96%;margin:0px auto" :class="{cardBackColor:editOption}">
        <el-form inline
                 style="text-align: left"
                 :model='customerTransfer'
                 :rules="rules"
                 ref='customerTransferRef'>
          <el-row>
            <el-col :md="12" :lg="8">
              <el-form-item label="移交后主办" prop="mainManagerAfterId">
                <ft-transfer-user v-model="customerTransfer.mainManagerAfterId" @load="loadAfterUser"
                                  :editable="editOption"/>
              </el-form-item>
            </el-col>
            <el-col :md="12" :lg="8">
              <el-form-item label="移交后协办" prop="viceManagerAfterId">
                <ft-transfer-user v-model="customerTransfer.viceManagerAfterId" :editable="editOption"
                                  @load="loadAfterViceUser"/>
              </el-form-item>
            </el-col>
            <el-col :md="12" :lg="8">
              <el-form-item label="移交后所属部门" style="float: right">
                {{this.afterDeptName}}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-form>
          <hr v-show="editOption" style="background-color: #EDEDED;border: none;height: 1px;margin: 0px"/>
          <el-row v-show="editOption">
            <el-col style="text-align: right;margin-right:20px;margin-bottom: 10px;padding: 16px 0px">
              <el-button @click="cancel" size="small">取消</el-button>
              <el-button type="primary" @click="saveTransfer()" size="small" :disabled="!editOption">保存</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-row v-if="customerTransfer" style="text-align:center">
        <transfer-customer-list
          :customer-transfer-id="customerTransferId"
          :bill-status="customerTransfer.billStatus"
          @changeDept="changeDept"
          @validate='validateTransferCustomerList'>
        </transfer-customer-list>
      </el-row>
    </el-card>
    <el-card :body-style="{padding:'0px 20px',margin:'20px 0 0 0'}">
      <div>
        <el-row>
          <el-col align="left" style="white-space: nowrap" :span="23">
            <span
              style="padding: 16px 0px;margin-left:20px;text-align:left;">移交原因</span>
          </el-col>
          <el-button style='float:right' v-show="!reasonOption && customerTransfer.billStatus == 'INITIAL'" size="small"
                     @click="editReason()" plain>编辑
          </el-button>
        </el-row>
        <el-form style="width: 96%;margin:0px auto"
                 :model='customerTransfer'
                 :rules="rules"
                 :class="{cardBackColor:reasonOption}"
                 ref='customerTransfer'>
          <el-row>
            <el-col>
              <el-form-item style="padding-top: 20px" label="" prop="transferReason">
                <ft-input type="textarea"
                          :editing="reasonOption"
                          :autosize='{ minRows: 5, maxRows: 8}'
                          v-model="customerTransfer.transferReason">
                </ft-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-show="reasonOption">
            <el-col style="text-align: right;margin-bottom: 10px;">
              <el-button @click="cancelReason()" size="small">取消</el-button>
              <el-button type="primary" @click="saveReason()" size="small">保存</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
    <el-card>
      <div style="width: 96%; margin:0 auto;">
        <el-row>
          <el-col :span="8" style="width:98%;vertical-align: middle;">
            <ft-attach v-if="customerTransfer&&customerTransfer.customerTransferId" title="附件信息"
                       sourceType="customerTransfer" :sourceId="customerTransfer.customerTransferId"
                       :categories="attachClass"
                       :basePath="'/doc/generate/客户维护/'+customerTransfer.customerTransferId"></ft-attach>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>

  import FtUser from '../ft/FtUser'
  import FtInput from '../ft/FtInput'
  import TransferCustomerList from './TransferCustomerList'
  import FtTransferUser from "../ft/FtTransferUser";
  import {categories} from 'lss-ui/src/components/js/AttachClass'

  export default {
    name: 'TransferDetial',
    components: {FtTransferUser, FtUser, FtInput, TransferCustomerList},
    props: ['customerTransferId', 'activeName'],
    mounted() {
      this.load()
      categories(this, 'AttachClass', rest => {
        this.attachClass = rest
      })
    },
    data() {
      return {
        //附件分类
        attachClass: [],
        customerTransfer: {},
        afterDeptName: {
          type: String
        },
        mainManagerAfterId: '',
        //单据是否可以编辑
        editOption: false,
        reasonOption: false,
        mainManagerAfterName: '',
        viceManagerAfterName: '',
        mainDeptId: '',
        viceDeptId: '',
        outTime: 0,
        rules: {
          mainManagerAfterId: [
            {required: true, message: '请输入移交后主办', trigger: 'blur'},
          ],
          viceManagerAfterId: [
            {required: true, message: '移交后协办', trigger: 'blur'},
          ],
          transferReason: [
            {max: 2000, message: '不得超过2000字符', trigger: 'blur'}
          ]
        },
        // 提交按钮控制
        submitShow: false,
        // 审核按钮控制
        checkShow: false,
        //校验是否选择了移交客户
        validateTransferCustomerListVal: false,
      }
    },
    methods: {
      validateTransferCustomerList(val) {
        this.validateTransferCustomerListVal = val;
      },
      loadAfterUser(item) {
        this.mainDeptId = item.deptId
        this.$set(this.afterDeptName = item.deptName)
      },
      //移交后协办
      loadAfterViceUser(item) {
        this.viceDeptId = item.deptId
      },
      //查询
      load() {
        if (this.customerTransferId) {//主键不为空，为查询详细
          this.$http.get('/joys-rest/lss-customer/transfer/' + this.customerTransferId
          ).then(resp => {
            this.customerTransfer = resp.body
          }, resp => {
            this.$message.error(resp.body)
          })
        }
      },
      //保存
      save() {
        this.$refs.customerTransfer.validate((valid) => {
          if (this.mainDeptId != this.viceDeptId) {
            this.$message.error('主协办人必须为同一部门')
            return false
          }
          if (this.customerTransfer.mainManagerAfterId == this.customerTransfer.viceManagerAfterId) {
            this.$message.error('主协办人不能为同一个人')
            return false
          }
          if (valid) {
            this.$http.put('/joys-rest/lss-customer/transfer/customer/save',
              this.customerTransfer
            ).then(resp => {
              this.customerTransfer = resp.body
              this.reasonOption = false
              this.editOption = false
              this.$message.success('保存成功!')
            }, resp => {
              this.load()
              this.$message.error(resp.body.message)
            })
          } else {
            return false
          }
        })
      },
      saveTransfer() {
        if (this.save()) {
          this.editOption = false
        }
      },
      //取消
      cancel() {
        this.editOption = false
        this.load()
      },
      //修改
      edit() {
        this.editOption = true
      },
      editReason() {
        this.reasonOption = true
      },
      cancelReason() {
        this.reasonOption = false
        this.$refs.customerTransfer.clearValidate()
        this.load()
      },
      saveReason() {
        this.save()
      },
      //移交
      transfer() {
        this.customerTransfer.billStatus = 'PASS'
        console.log(this.customerTransfer)
        this.$http.put('/joys-rest/lss-customer/transfer/customer/save',
          this.customerTransfer
        ).then(resp => {
          this.customerTransfer = resp.body
          this.editOption = false
          this.$message.success('移交成功!')
        }, resp => {
          this.$message.error(resp.body.message)
        })
      },
      // 检查当前表单
      validateForm() {
        let errorMessage = [];
        if (!this.validateTransferCustomerListVal) {
          errorMessage.push("请先选择移交客户")
        }
        if (errorMessage.length > 0) {
          this.$message.error(errorMessage.join(' , '))
          return false
        }
        return true
      },
      // 提交
      submit() {
        if (!this.validateForm()) {
          return
        }
        this.$http.put('/joys-rest/lss-customer/transfer/submit/' + this.customerTransferId).then(
          resp => {
            this.load()
            this.submitShow = false
            this.checkShow = true
            this.editOption = false
            this.$message.success('已提交！')

          },
          resp => {
            this.$message.error("提交失败！")
          }
        )
      },
      // 提交
      check() {
        if (!this.validateForm()) {
          return
        }
        this.$http.put('/joys-rest/lss-customer/transfer/check/' + this.customerTransferId).then(
          resp => {
            this.checkShow = false
            this.$message.success('已审核！')
          },
          resp => {
            this.$message.error("审核失败！")
          }
        )
      },
      //返回
      goBack() {
        this.$emit('returnList', {showType: 'table', activeName: this.activeName})
      },
      //选择客户后更新主表信息
      changeDept() {
        this.load()
      }
    }
  }

</script>

<style>
  .cardBackColor {
    background-color: #F4F8F9
  }

  .process-row-cs {
    margin: 0 20px 10px 20px;
    padding-bottom: 10px
  }
</style>
